<script setup>
import { computed, reactive, ref, toRefs } from 'vue';
import { ElInput, ElTable, ElTableColumn } from 'element-plus';
import { OPERATION_TYPE } from '@/common/common-const';
import PaginationIndex from '@/components/PaginationIndex.vue';
import ReleasePromptMessage from '@/components/ReleasePromptMessage.vue';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import DictionaryDrawer from './DictionaryDrawer.vue';

const props = defineProps({
  name: {
    type: String,
  },
});
const { name } = toRefs(props);

const titleName = computed(() => name.value);
const total = ref(0);
const drawerTableShow = ref(false);

const selectParams = reactive({
  pageNumber: 1,
  pageSize: 13,
  deptId: '',
  seedlingName: '',
  seedlingType: '',
});

const tableData = ref([
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:13',
    updateBy: null,
    updateTime: null,
    remark: '用户性别列表',
    dictId: 1,
    dictName: '用户性别',
    dictType: 'sys_user_sex',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:14',
    updateBy: null,
    updateTime: null,
    remark: '菜单状态列表',
    dictId: 2,
    dictName: '菜单状态',
    dictType: 'sys_show_hide',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:14',
    updateBy: null,
    updateTime: null,
    remark: '系统开关列表',
    dictId: 3,
    dictName: '系统开关',
    dictType: 'sys_normal_disable',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:15',
    updateBy: null,
    updateTime: null,
    remark: '任务状态列表',
    dictId: 4,
    dictName: '任务状态',
    dictType: 'sys_job_status',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:15',
    updateBy: null,
    updateTime: null,
    remark: '任务分组列表',
    dictId: 5,
    dictName: '任务分组',
    dictType: 'sys_job_group',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:16',
    updateBy: null,
    updateTime: null,
    remark: '系统是否列表',
    dictId: 6,
    dictName: '系统是否',
    dictType: 'sys_yes_no',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:17',
    updateBy: null,
    updateTime: null,
    remark: '通知类型列表',
    dictId: 7,
    dictName: '通知类型',
    dictType: 'sys_notice_type',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:17',
    updateBy: null,
    updateTime: null,
    remark: '通知状态列表',
    dictId: 8,
    dictName: '通知状态',
    dictType: 'sys_notice_status',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:18',
    updateBy: null,
    updateTime: null,
    remark: '操作类型列表',
    dictId: 9,
    dictName: '操作类型',
    dictType: 'sys_oper_type',
    status: '0',
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:19',
    updateBy: null,
    updateTime: null,
    remark: '登录状态列表',
    dictId: 10,
    dictName: '系统状态',
    dictType: 'sys_common_status',
    status: '0',
  },
]);

const messageInfo = reactive({
  messageBoxShow: false,
  messageText: '',
  messageBoxType: '',
});

// 分页
const handleCurrentChange = (val) => {
  selectParams.pageNumber = val;
};

// 操作
const handleOperation = (type, item) => {
  if (type == OPERATION_TYPE.DELETE) {
    messageInfo.infoBoxValue = item;
    messageInfo.messageBoxType = '删除';
    messageInfo.messageBoxShow = true;
    messageInfo.messageText = '该数据删除后不可恢复，确定要删除吗？';
  }

  if (type == OPERATION_TYPE.LOOK) {
    drawerTableShow.value = true;
  }
};

const handleMessageBox = (val) => {
  messageInfo.messageBoxShow = false;
  messageInfo.messageText = '';

  if (val) {
    //  删除接口
  }

  messageInfo.messageBoxType = '';
};

const closeBoxShowDialog = () => {
  drawerTableShow.value = false;
};
</script>
<template>
  <div class="root h-100% w-100% rounded-5px p-1.5rem">
    <h3>{{ titleName }}</h3>
    <div class="flex-x-between">
      <div class="select_top mt-20px flex-center">
        <div class="select_u flex-center">
          <div class="flex-center">
            <span>字典名称</span>
            <ElInput v-model="selectParams.seedlingName" placeholder="请输入" />
          </div>
        </div>
      </div>
      <div class="mt-20px flex-center">
        <div class="select_btn mr-20px flex-center">
          <div @click="handleReset()">重置</div>
          <div @click="handleSelect()">查询</div>
        </div>
        <div class="btn-add flex-center cursor-pointer" @click="handleOperation('ADD')">
          <SvgIconIndex icon-class="add" size="20px" class="cursor-pointer" />新建
        </div>
      </div>
    </div>
    <div class="mt-20px">
      <ElTable
        :data="tableData"
        style="width: 100%"
        border
        row-key="id"
        :header-cell-style="{
          color: '#333333',
          background: 'rgba(97, 186, 55, 0.06)',
        }"
      >
        <ElTableColumn type="index" label="字典编号" align="center" width="85" />
        <ElTableColumn prop="dictName" label="字典名称" align="center" show-overflow-tooltip />
        <ElTableColumn prop="dictType" label="字典类型" align="center" show-overflow-tooltip />
        <ElTableColumn prop="remark" label="备注" align="center" show-overflow-tooltip />
        <ElTableColumn prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
        <ElTableColumn label="操作" align="center" width="240">
          <template #default="scope">
            <div class="flex items-center justify-around">
              <div
                class="edit_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('EDIT', scope.row)"
              >
                编辑
              </div>
              <div
                class="look_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('LOOK', scope.row)"
              >
                查看
              </div>
              <div
                class="del_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('DELETE', scope.row)"
              >
                删除
              </div>
            </div>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
    <PaginationIndex
      :page-number="selectParams.pageNumber"
      :page-size="selectParams.pageNumber"
      :total="total"
      @handle-current-change="handleCurrentChange"
    />
  </div>

  <!-- 提示 -->
  <ReleasePromptMessage
    v-if="messageInfo.messageBoxShow"
    :message-box-show="messageInfo.messageBoxShow"
    :message-text="messageInfo.messageText"
    :message-box-type="messageInfo.messageBoxType"
    @handle-message-box="handleMessageBox"
  />

  <!-- 查看字典数据 -->
  <DictionaryDrawer :drawer-table-show="drawerTableShow" @close-box-show-dialog="closeBoxShowDialog" />
</template>

<style scoped lang="scss">
.root {
  font-size: $base-system-font-size-base;
  background-color: $base-background-white;
  .select_top {
    .select_u {
      display: flex;
      white-space: nowrap;
      div {
        display: flex;
        align-items: center;
        margin-right: 20px;

        span {
          display: inline-block;
          margin-right: 12px;
        }
      }
    }
  }
  .select_btn {
    display: flex;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 40px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;

      &:first-child {
        margin-right: 16px;
        color: #999999;
        background: rgba(171, 171, 171, 0.2);
      }

      &:nth-child(2) {
        color: $base-button-color-green;
        background: $base-button-background-green;
      }
    }
  }

  .btn-add {
    width: 100px;
    height: 40px;
    color: $base-button-color-white;
    background-color: $base-button-color-green;
    border-radius: 5px;
  }
  .edit_btn,
  .look_btn,
  .del_btn {
    font-size: $base-system-font-size-base;
    border-radius: 5px;
  }
  .edit_btn {
    color: $base-button-color-blue;
    background-color: $base-button-background-blue;
  }
  .look_btn {
    color: $base-button-color-green;
    background-color: $base-button-background-green;
  }
  .del_btn {
    color: $base-button-color-red;
    background-color: $base-button-background-red;
  }
}

:deep(.el-input .el-input__wrapper) {
  width: 240px;
  height: 40px;
}
:deep(.el-select__wrapper) {
  width: 240px;
  height: 40px;
}
</style>
